<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>欢迎加入i测吧</title>
  <link rel="stylesheet" type="text/css" href="https://ad.aicebar.com/public/lib/css/style.css" />
  <script src="../assets/vue.min.js"></script>
  <style>
    #app {
      width: 100%;
      height: 14.48rem;
      background: url('../images/bg3.png') no-repeat center;
      background-size: cover;
    }

    .box {
      width: 7rem;
      height: 3.28rem;
      border-radius: .32rem;
      background: white;
      padding: .28rem;
      position: absolute;
      top: 7.6rem;
      left: 50%;
      margin-left: -3.5rem;
    }

    .txt1 {
      font-size: .32rem;
      color: #333;
      font-weight: bold;
    }

    .ul {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: .6rem;
    }

    .li {
      color: #333;
      font-size: .28rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: .24rem;
    }

    .box2 {
      width: 1.14rem;
      height: .16rem;
      border: 1px solid #FC8800;
      background: #FFF8EA;
      border-radius: .08rem;
      margin: .15rem 0;
    }

    .txt2 {
      font-size: .24rem;
      color: #ccc;
    }

    .btn {
      width: 5.14rem;
      height: 1.16rem;
      border-radius: 1rem;
      background: linear-gradient(180deg, #7990F7 0%, #4B6BFF 100%);
      font-size: .56rem;
      color: white;
      font-weight: bold;
      text-align: center;
      overflow: hidden;
      margin: 0 auto;
      margin-top: .4rem;
      box-shadow: 0px 3px 3px #C1CCFF;
    }

    .btn2 {
      width: 5.14rem;
      height: 1.16rem;
      line-height: 1.16rem;
      border-radius: 1rem;
      background: linear-gradient(180deg, #FC7C60 0%, #F93D7A 100%);
      font-size: .56rem;
      color: white;
      font-weight: bold;
      text-align: center;
      overflow: hidden;
      margin: 0 auto;
      margin-top: .4rem;
      box-shadow: 0px 3px 3px #BB2648;
    }

    .txt3 {
      font-size: .24rem;
      margin: .1rem auto;
    }

    .act {
      background: #FDC165;
    }

    .name {
      width: 1rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="box">
      <p class="txt1">当前已助力</p>

      <div class="ul">
        <div class="li" v-for="(item, index) in list">
          <p class="name">{{item.nick_name}}</p>
          <div class="box2" :class="item.nick_name == '待邀请'? '': 'act'"></div>
          <p class="txt2">第{{index+1}}人</p>
        </div>
      </div>

      <div class="btn2" v-if="unclock >= 5" @click="handleUnlock()">立即解锁</div>
      <div class="btn" @click="callFlutter()" v-else>
        <p class="txt3">邀请5人添加生日即可解锁报告</p>
        <p>立即邀请</p>
      </div>

    </div>

  </div>
</body>

<script src="../assets/axios.js"></script>
<script src="../js/utils.js"></script>
<script>
  var api = domain()
  var json = getQueryString()

  new Vue({
    el: '#app',
    data() {
      return {
        id: json.id,
        list: [],
        unclock: ''
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      handleUnlock() {
        switchUrl(parseInt(json.type), this.id, 0)
      },
      callFlutter() {
        var str = ''
        var zh = ''
        switch (parseInt(json.type)) {
          case 1:
            str = 'yunshi'
            zh = '一生'
            break;
          case 2:
            str = 'caifu'
            zh = '财富'
            break;
          case 3:
            str = 'shiye'
            zh = '事业'
            break;
          case 4:
            str = 'aiqing'
            zh = '感情'
            break;
          case 5:
            str = 'nianyun'
            zh = '2024年运'
            break;
        }
        const obj = {
          url: str,
          title: '我想免费获得' + zh + '运势报告，帮我助力一下吧~',
          des: '更多专业报告，尽在i测吧App'
        }
        shareWebPage.postMessage(JSON.stringify(obj));
      },
      async getData() {
        var data = new FormData();
        data.append('product_id', this.id);
        const headers = {
          'authorization': getAppToken()
        }
        axios.post(api + '/v1/subject/fissionGet', data, {
          headers
        })
          .then((res) => {
            let arr = res.data.data
            this.unclock = arr.length
            const obj2 = {
              nick_name: '待邀请'
            }
            while (arr.length < 5) {
              arr.push(obj2)
            }
            this.list = arr
          })
      },


    }
  });
</script>

</html>